<template>
	<view class="upload">
		<view class="pre-box" v-if="showUploadList">
			<view class="pre-item" v-for="(item, index) in imageList" :key="index">
				<image class="pre-item-image" :src="item.url" mode="aspectFill"></image>
			</view>
		</view>
		<u-upload ref="uUpload" :header="{token}" :custom-btn="true" :auto-upload="true" :show-progress="false" @on-remove="onRemove"
			@on-success="onSuccess" :action="action" :multiple="false" del-icon="trash" :fileList="imageList"
			:maxCount="maxCount" :width="width" :height="height">
			<view slot="addBtn" :style="{width:width+'rpx',height:height+'rpx'}" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
				<image :src="upload"></image>
				<view class="upload_icon">
					<image src="@/static/images/upload@2x.png"></image>
				</view>
			</view>
		</u-upload>
	</view>
</template>

<script>
	import {baseURL} from '@/config/app.js'
	export default {
		props: {
			upload: {
				type: String,
				default: ''
			},
			uploadText: {
				type: String,
				default: ''
			},
			url: {
				type: String,
				default: ''
			},
			token: {
				type: String,
				default: ''
			},
			width: {
				type: [Number,String],
				default: 306
			},
			height: {
				type: [Number,String],
				default: 190
			},
			maxCount:{
				type: [Number,String],
				default: 1
			}
		},
		data() {
			return {
				filesArr: [], // 上传的图片列表(图片选择或者上传成功后，会保存在组件内部的lists数组中，数组元素为对象)
				imageList: [], // 显示的图片列表，数组元素为对象，必须提供url属性
				action: baseURL+'file/formimage', // 后端上传图片地址
				showUploadList: false,
			}
		},
		watch:{
		        url:{
		            handler(newVal){
		                if(newVal){
							this.imageList.push({
								url: newVal
							}); // 将上传的图片push到需要展示的数组中
						}
		            },
		            immediate:true,
		        }
		    },
		methods: {
			// 点击删除选择的图片
			onRemove(index) {
				this.imageList.splice(index, 1); // arr.splice(i,n) 删除从i(索引值)开始之后的那个元素。返回值是删除的元素
			},
			// 图片自动上传成功的钩子
			onSuccess(data) {
				let files = [];
				// 通过filter（过滤数组），筛选出上传进度为100的文件
				files = this.$refs.uUpload.lists.filter(val => {
					return val.progress == 100;
				})
				// 如果不需要进行太多的处理，直接如下即可
				files = this.$refs.uUpload.lists;
				this.$emit('success','/'+ data.data.base_url)
				this.filesArr.push({
					url: data.data.path
				});
			},
		}

	}
</script>
<style lang="scss" scoped>
	.upload {
		margin-bottom: 30rpx;
		background: #FFFFFF;
		border-radius: 10rpx;

		.pre-box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			flex-wrap: wrap;

			.pre-item {
				flex: 0 0 48.5%;
				border-radius: 10rpx;
				height: 140rpx;
				overflow: hidden;
				position: relative;
				margin-bottom: 20rpx;

				.pre-item-image {
					width: 100%;
					height: 140rpx;
				}
			}
		}

		.slot-btn {
			position: relative;
			width: 306rpx;
			height: 190rpx;
			border: 2rpx solid #CCCCCC;
			border-radius: 10rpx;
			image {
				width: 100%;
				height: 100%;
			}
			.upload_icon {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				image {
					width: 72rpx;
					height: 72rpx;
					background-color: 50%;
				}
			}
		}

		.url_content {
			width: 300rpx;
			height: 180rpx;
			border: 2rpx solid #CCCCCC;
			border-radius: 10rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}
</style>